<template>
    <div>
        <van-tabs v-model="active" color="#1989fa" @change="onchange" sticky animated swipeable line-width="33.3%"
            offset-top="50">

            <!-- 省公司党委学习台账 -->
            <van-tab title="省公司党委学习台账">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list id='toDoList' v-model="loading" :finished="finished"
                        :finished-text='!haveToDoError ? "没有更多数据" : ""' :error-text="todoErrorMessage" @load="onLoad"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list" :key="index" @click="todetail(index, item, '1')">
                            <div class="titlefont"> {{ item.TITLE }}</div>
                            <div class="infosfont"> 学习内容:{{ item.REMARK }}</div>
                            <div class="infosfont"> 学习形式:{{ item.LEARN_FORM }}</div>
                            <div class="infosfont"> 参加人员:{{ item.PARTICIPANTS }}</div>
                            <div class="infosfont"> 发布时间:{{ timeUtil(item.APPLY_DATE) }}</div>
                        </van-cell>

                        <!-- 无数据 -->
                        <div v-show="!haveTodoData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('sgsTZ')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                暂无数据！
                            </div>
                        </div>

                        <!-- 获取数据失败 -->
                        <div v-show="haveToDoError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('sgsTZ')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>

            <!-- 分公司党委学习台账 -->
            <van-tab title="分公司党委学习台账">
                <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" immediate-check="false">
                    <van-list id='doneList' v-model="loading2" :finished="finished2"
                        :finished-text='!haveDoneError ? "没有更多数据" : ""' :error-text="doneErrorMessage" @load="onLoad2"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list2" :key="index" @click="todetail(index, item, '2')">
                            <div class="titlefont"> {{ item.TITLE }}</div>
                            <div class="infosfont"> 学习内容:{{ item.REMARK }}</div>
                            <div class="infosfont"> 学习形式:{{ item.LEARN_FORM }}</div>
                            <div class="infosfont"> 参加人员:{{ item.PARTICIPANTS }}</div>
                            <div class="infosfont"> 发布时间:{{ timeUtil(item.APPLY_DATE) }}</div>
                        </van-cell>
                        <div v-show="!haveDoneData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('fgsTZ')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                暂无数据！
                            </div>
                        </div>
                        <div v-show="haveDoneError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('fgsTZ')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>

    </div>
</template>



<script>
import { getSGSDWXXTZList, getFGSDWXXTZList } from "@/api/dwdyytAPI";
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name: 'dwdyytTable0',
    data() {
        return {
            active: 0,
            list: [],
            list2: [],

            refreshing: false,
            loading: false,
            finished: false,

            refreshing2: false,
            loading2: false,
            finished2: false,

            title: '',
            startTime: '',
            endTime: '',
            
            getSGSDWXXTZListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            getFGSDWXXTZListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            maxPageToDo: 100,
            maxPageDone: 100,
            todoErrorMessage: '',
            doneErrorMessage: '',
            haveTodoData: true,
            haveDoneData: true,
            haveToDoError: false,
            haveDoneError: false,
        }
    },

    /// 不知道啥意思
    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
        ...mapGetters(["hassetmenu"]),
    },

    /// 一个页面 激活 后的钩子函数
    activated() {

        let dom = document.getElementById('toDoList');
        if (dom != null) {
            if (dom.scrollTop > 0) {
                dom.scrollTop = 0;
            }
        }

        let dom2 = document.getElementById('doneList');
        if (dom2 != null) {
            if (dom2.scrollTop > 0) {
                dom2.scrollTop = 0;
            }
        }

        let dom3 = document.getElementById('draftList');
        if (dom3 != null) {
            if (dom3.scrollTop > 0) {
                dom3.scrollTop = 0;
            }
        }
    },

    /// 创建完成
    created() {

    },

    /// 挂载完成
    mounted() {
        if (localStorage.getItem('dwdyytToDoNumber') != '' &&
            localStorage.getItem('dwdyytToDoNumber')) {

            this.active = JSON.parse(localStorage.getItem('dwdyytToDoNumber'))
            this.onchange(this.active);
            if (this.active == 0) {
                this.active = 0;
            } else if (this.active == 1) {
                this.active = 1;
            } else if (this.active == 2) {
                this.active = 2;
            } else {
                this.active = 0;
            }
            localStorage.setItem('dwdyytToDoNumber', '')
        }
    },

    /// 所有的 方法
    methods: {

        /// 查询
        setsearchdata(startTime, endTime, title) {
            this.startTime = startTime;
            this.endTime = endTime;
            this.title = title;
            
            if (this.active == 0) {
                this.onRefresh();
            }
            else if (this.active == 1) {
                this.onRefresh2();
            }
        },

        /// 
        onchange(index) {

            this.title = '';
            this.startTime = '';
            this.endTime = '';
        },

        /// 省公司党委学习台账 刷新
        onRefresh() {
            //清空列表数据
            this.finished = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading = true;
            this.refreshing = true;
            this.getSGSDWXXTZListQuery.page = 1;
            this.maxPageToDo = 100;
            this.onLoad();
        },

        /// 分公司党委学习台账 刷新
        onRefresh2() {
            //清空列表数据
            this.finished2 = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading2 = true;
            this.refreshing2 = true;
            this.getFGSDWXXTZListQuery.page = 1;
            this.maxPageDone = 100;
            this.onLoad2();
        },


        /// 装载、输入（文件）
        onLoad() {

            if (this.refreshing) {
                this.list = [];
                this.refreshing = false
            }

            console.log("AAAAA" + this.user.userName)
            if (this.getSGSDWXXTZListQuery.page <= this.maxPageToDo) {
                getSGSDWXXTZList(Object.assign(this.getSGSDWXXTZListQuery,
                    { userName: this.user.userName },
                    { title: this.title },
                    { startTime: this.startTime },
                    { endTime: this.endTime }
                ))
                    .then((result) => {
                        this.haveToDoError = false;
                        if (!result.data) {

                            this.loading = false;
                            this.finished = true;
                            Notify(result.message);
                            this.todoErrorMessage = result.message;
                            return;
                        }

                        let listdetails = this.list;
                        if (this.getSGSDWXXTZListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }

                            if (listdetails.length == 0) {
                                this.haveTodoData = false;
                            }
                            else {
                                this.haveTodoData = true;
                            }

                            this.maxPageToDo = result.data.data.totalPages;
                        }
                        else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }

                        this.list = listdetails;
                        this.loading = false;
                        this.getSGSDWXXTZListQuery.page = this.getSGSDWXXTZListQuery.page + 1;
                    })
                    .catch((error) => {

                        console.log("22222222222" + JSON.stringify(error));
                        this.loading = false
                        this.finished = true;
                        this.haveTodoData = true;
                        this.todoErrorMessage = '获取数据失败,请稍后重试';
                        this.haveToDoError = true,
                            Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    });
            }
            else {
                this.loading = false
                this.finished = true;
            }
        },

        /// 
        onLoad2() {
            if (this.refreshing2) {
                this.list2 = [];
                this.refreshing2 = false;
            }
            if (this.getFGSDWXXTZListQuery.page <= this.maxPageDone) {
                getFGSDWXXTZList(Object.assign(this.getFGSDWXXTZListQuery,
                    { userName: this.user.userName },
                    { title: this.title },
                    { startTime: this.startTime },
                    { endTime: this.endTime }
                ))
                    .then((result) => {
                        this.haveDoneError = false;
                        if (!result.data) {
                            this.loading2 = false;
                            this.finished = true;
                            Notify(result.message);
                            this.doneErrorMessage = result.message;
                            return;
                        }

                        let listdetails = this.list2;
                        if (this.getFGSDWXXTZListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }
                            if (listdetails.length == 0) {
                                this.haveDoneData = false;
                            } else {
                                this.haveDoneData = true;
                            }
                            this.maxPageDone = result.data.data.totalPages;
                        } else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        this.list2 = listdetails;
                        this.loading2 = false;
                        this.getFGSDWXXTZListQuery.page = this.getFGSDWXXTZListQuery.page + 1;
                    })
                    .catch((error) => {
                        this.haveDoneError = true;
                        this.haveDoneData = true;
                        this.loading2 = false
                        this.finished2 = true;
                        this.doneErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading2 = false
                this.finished2 = true;
            }
        },


        timeUtil(value) {
            return moment(value).format('YYYY-MM-DD');
        },

        getListdata(value) {
            if (value = 'sgsTZ') {
                this.onRefresh();
            }
            else if (value = 'fgsTZ') {
                this.onRefresh2();
            }
        },

        /// 跳转详情
        todetail(index, item, istodo) {

            if (istodo == '1') {

                /// 省公司党委学习台账
                localStorage.setItem('dwdyytToDoNumber', 0)
                var todoType = '1';
                var workFlag = 'task';
            }
            else if (istodo == '2') {

                /// 分公司党委学习台账
                localStorage.setItem('dwdyytToDoNumber', 1)
                var todoType = '2';
                var workFlag = 'join';
            }

            this.$router.push(
                {
                    name: 'dwdyytDetailTZ',
                    query: {
                        taizhangId: item.ID,
                    }
                }
            )
        }
    }
}



</script>


<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}

.titlefont {
    font-size: 15px;
}

.infosfont {
    font-size: 12px;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>